<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

		<title>漂茶寄语</title>
	</head>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
			font-family: "微软雅黑";
			color: white;
		}
		
		#head_img {
			filter: url(blur.svg#blur);
			/* FireFox, Chrome, Opera */
			-webkit-filter: blur(8px);
			/* Chrome, Opera */
			-moz-filter: blur(8px);
			-ms-filter: blur(8px);
			filter: blur(8px);
			filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=8, MakeShadow=false);
			/* IE6~IE9 */
		}
		
		#head_full {
			border-radius: 50%;
			width: 100%;
		}
		
		#word {
			z-index: 99;
			width: 100%;
			border: .5px solid #EAEAEA;
			border-radius: 20px;
			text-align: center;
			outline: none;
		}
	</style>

	<body>
		<table style="height: 45px;width: 100%;background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);position: fixed;z-index: 9999;">
			<td style="width: 45px;float: left;">
				<a href="javascript:history.back(-1);" style="color: white;">
					<img src="../icon/back_white.png" style=" height: 35px;margin-top: 5px;margin-left: 5px;" />
				</a>
			</td>
			<td align="center">
				<img src="../icon/flowtext.png" style="height: 35px;margin-top: 5px;" />
			</td>
			<td style="width: 45px;float: right;">
			</td>
		</table>

		<div id="head" style="overflow: hidden;width: 100%;">
			<img id="head_img" style="width: 100%;" />
		</div>
		<div id="head_full_div" style="position:absolute;z-index: 99;width:100%;">
			<img id="head_full" style="margin-left: 40%;width: 20%;" />
			<img id="sex_full" style="width: 5%;margin-left: -7%;" />
		</div>
		<div style="position:absolute;width:100%;">
			<input id="word" placeholder="请输入漂茶寄语" style="margin-left: 15%; width: 70%;" />
		</div>
		<div id="pay_div" align="center">
			<img id="pay" src="../icon/to_ta_drift.png" style="border-radius: 20px;background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);width: 30%;" />
		</div>

	</body>
	<script src="../js/get.js"></script>
	<script>
		var openid = GetRequest(1);
		var sex = GetRequest(2);
		var mine = JSON.parse(localStorage.getItem("users"));
		var other = JSON.parse(sessionStorage.getItem(openid));
		var height = $(window).height();
		var width = $(window).width();
		$("#head").css("height", height / 5 + width * 0.2 + "px");
		$("#head_img").attr("src", other.user_headimgurl);
		$("#head_full").attr("src", other.user_headimgurl);
		if(sex == "1") {
			$("#sex_full").attr("src", "../icon/sex_boy.png");
		}
		if(sex == "2") {
			$("#sex_full").attr("src", "../icon/sex_girl.png");
		}
		$("#head_full_div").css("margin-top", -height / 17 - width * 0.2 + "px");
		$("#word").css("height", height / 5 + "px");
		$("#word").css("margin-top", -height / 6 - width * 0.2 + "px");
		$("#pay_div").css("margin-top", height / 3 + "px")

		var ip = returnCitySN.cip;
		var send_time = getNowFormatDate();

		$('#pay').bind("click", function() {
			var flowText = $("#word").val();
			if(flowText != "") {
				$.ajax({
					url: "http://www.xxxx.com/api/teas?type=0",
					contentType: "application/json",
					type: "post",
					data: JSON.stringify({
						from_openid: mine.wx_openid,
						receive_openid: openid,
						send_time: send_time,
						flow_text: flowText,
					}),
					async: false,
					success: function(res) {
						$.ajax({
							url: "http://www.xxxx.com/api/payments?teaid=" + res.teaid + "&ip=" + ip,
							contentType: "application/json",
							type: "post",
							async: true,
							success: function(r_res) {
								wx.config({
									debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									appId: 'xxxxxxxxxxxxxxxx', // 必填，公众号的唯一标识
									timestamp: r_res.timeStamp, // 必填，生成签名的时间戳
									nonceStr: r_res.nonceStr, // 必填，生成签名的随机串
									signature: r_res.paySign, // 必填，签名
									jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
								});
								wx.chooseWXPay({
									timestamp: r_res.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
									nonceStr: r_res.nonceStr, // 支付签名随机串，不长于 32 位
									package: r_res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
									signType: r_res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
									paySign: r_res.paySign, // 支付签名
									success: function(pay_res) {
										// 支付成功后的回调函数
										location.href = "paysuccess.html";

									},
									cancel: function(pay_e) {
										location.href = "paywarn.html";
									}

								});
							},
							error: function(r_e) {
								location.href = "paywarn.html";
							}

						});
					},
					error: function(e) {
						console.log(e);
					}
				});
			} else {
				alert("请在漂茶上留下您的寄语")
			}

		})

		function getNowFormatDate() {
			var date = new Date();
			var seperator1 = "-";
			var seperator2 = ":";
			var month = date.getMonth() + 1;
			var strDate = date.getDate();
			if(month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if(strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
				" " + date.getHours() + seperator2 + date.getMinutes() +
				seperator2 + date.getSeconds();
			return currentdate;
		}
	</script>

</html>
